<template>
    <div>
        <div class="box flex flex-v">
            <p>欢迎使用IM系统</p>
            <div class="flex flex-align-center flex-pack-center" style="margin-top:0.4rem">
                <input type="text" v-model="loginInfo">
                <div class="btn flex flex-align-center flex-pack-center" @click="login"><p>登录</p></div>
            </div>
        </div>
    </div>
</template>
 <script>
 export default {
     data(){
         return {
             loginInfo:'',

         }
     },
     methods:{
         login(){
            let IM_SERVER_URL = "http://192.168.1.108:3000";
             if(this.loginInfo){
                this.$store.commit('setUser',this.loginInfo);
                var loginInfo = {loginUserId:this.loginInfo, loginToken:'47384h3uhjfh3j4j343j434h43'};
                IMSDK.loginImpl(loginInfo, IM_SERVER_URL, false);
             }else{
                console.log('输入用户名');
             }
         }
     }
 }
 </script>
<style lang="css" scoped>
.box{
    height: 1rem;
    margin-top: 5rem;
    font-size: 0.3rem;
}
input{
    border:solid 1px #ddd;
    height: 0.6rem;
    border-radius: 15px;
    width: 3rem;
}
.btn{
    height: 0.6rem;
    background: green;
    width: 20%;
    line-height: 0.6rem;
    color: #fff;
    border-radius: 7px;
    cursor: pointer;
    margin-left:0.2rem; 
}
</style>
